<template>
    <div class="_container">
        <a-flex justify="flex-end" class="header">
            <div class="lang">
                <Translate />
            </div>
        </a-flex>
        <div class="content">
            <div class="sitename">
                {{ env.VITE_SITENAME }}
            </div>
            <div class="desc">
                {{ env.VITE_DESCRIBE }}
            </div>
        </div>
        <div class="formdata-content">
            <a-form ref="loginForm" :model="formState" autocomplete="off" :rules="formStateRule" @keyup.enter="onFinish()">
                <a-form-item name="account">
                    <a-input v-model:value="formState.account" size="large" :placeholder="_t('login.LoginAccount')">
                        <template #prefix>
                            <UserOutlined />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item name="password">
                    <a-input-password v-model:value="formState.password" size="large" :placeholder="_t('login.LoginPassword')">
                        <template #prefix>
                            <LockOutlined />
                        </template>
                    </a-input-password>
                </a-form-item>
                <a-form-item :colon="false">
                    <a-button type="primary" style="width: 100%;" size="large" @click="onFinish">{{ _t('login.Login') }}</a-button>
                </a-form-item>
            </a-form>
        </div>
        <div class="copyright">
            <div class="link">
                <a-button type="link">{{ _t('login.Help') }}</a-button>
                <a-button type="link">{{ _t('login.Login') }}</a-button>
                <a-button type="link">{{ _t('login.Term') }}</a-button>
            </div>
            <Footer />
        </div>
    </div>
</template>

<script setup lang="ts">
import Footer from '@/layout/footer/index.vue'
import Translate from "@/components/translate/index.vue"
import { ref  } from 'vue';
import { iPb } from '@/protobuf/interface/index'
import { OpenPage } from '@/tool/utils'
import { $Params } from '@/tool/function'
import { Notification } from '@/tool/antdv'

import { Login } from '@/api/index'
import { _t } from "@/assets/lang/index.ts"
import { useStore } from '@/stores/index'
const store = useStore()
const env = import.meta.env

const formState = ref<iPb.Admin.ILoginRequest>(iPb.Admin.LoginRequest.create())
const loginForm = ref()
const formStateRule = {
    account: [
        { required: true, message: _t('login.LoginAccount') }
    ],
    password: [
        { required: true, message: _t('login.LoginPassword') }
    ],
}

const loading = ref<Boolean>(false)

const onFinish = () => {
    loginForm.value.validate().then(() => {
        if(loading.value) {
            return
        }
        loading.value = true
        Login(formState.value).then((result: iPb.Admin.ILoginResponse) => {
            loading.value = false
            var r = iPb.Admin.LoginResponse.create(result)
            store.login(r.token)
            Notification.success({
                message: formState.value.account,
                description: _t("login.WelcomeBack")
            })
            const params = $Params()
            OpenPage({ url: String(params.redirect || '') || "/dashboard" })
        }).catch((e: any) => {
            loading.value = false
            console.log(e)
        })
    }).catch((e: any) => {
        console.log(e)
    })
}

</script>

<style scoped lang="less">
._container {
    width: 100%;
    min-height: 100%;
    position: relative;
    background-image: url(@/assets/static/svg/bg-login.svg);
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
    .ant-form-item {
        margin-bottom: 24px !important;
    }
    .header {
        .lang {
            padding: 12px;
            cursor: pointer;
            color: rgba(0, 0, 0, .65);
        }
        // .lang:hover {
        //     background-color: rgba(0, 0, 0, 0.025);
        //     transition-duration: .5s;
        // }
    }
    .content {
        padding: 100px 0 0;
        text-align: center;
        .sitename {
            font-size: 33px;
            color: rgba(0, 0, 0, .85);
            font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
            font-weight: 600;
            position: relative;
            top: 2px;
        }
        .desc {
            font-size: 14px;
            color: rgba(0, 0, 0, .45);
            margin-top: 12px;
            margin-bottom: 40px;
        }
    }
    .formdata-content {
        min-width: 260px;
        width: 368px;
        margin: 0 auto;
    }
    .copyright {
        // position: absolute;
        // bottom: 0;
        // width: 100%;
        // margin: 48px 0 24px;
        // padding: 0 16px;
        // text-align: center;
        padding: 50px 0 20px;
        .link {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            margin-bottom: 10px;
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
        }
    }
    
}
</style>